<template>
  <div class="filter" v-if="flightFilterData.info !== undefined">
    <el-row type="flex"  :gutter="20" align="middle">
        <el-col :span="8" style="font-size:15px">
          单程:
          {{flightFilterData.info.departCity}} - {{flightFilterData.info.destCity}} / {{flightFilterData.info.departDate}}
        </el-col>
        <el-col :span="4">
          <el-select v-model="depAirportPlace" placeholder="起飞机场" size="mini" @change="changeAirport">
              <el-option
              v-for="(item, index) in flightFilterData.options.airport"
              :key="index"
              :label="item"
              :value="item"
              >
              </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select v-model="depAirportTime" placeholder="起飞时间" size="mini" @change="changeTime">
              <el-option
                v-for="(item, index) in flightFilterData.options.flightTimes"
                :key="index"
                :label="`${item.from} : 00 - ${item.to}: 00`"
                :value="item"
              >
              </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select v-model="depAirportCompany" placeholder="航空公司" size="mini"  @change="changeCompany">
              <el-option
                v-for="(item, index) in flightFilterData.options.company"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
          </el-select>
        </el-col>
        <el-col  :span="4">
          <el-select v-model="depPlaneSize" placeholder="机型" size="mini" @change="changeSize">
              <el-option
                v-for="(item, index) in planeSize"
                :key="index"
                :label="item.name"
                :value="item.size"
              >
              </el-option>
          </el-select>
        </el-col>
    </el-row>
    <div class="filter-cancel">
       筛选:
       <el-button
          type="primary"
          round
          plain
          size="mini"
          @click="cancelAll"
       >
         撤销
       </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    // 传如cacheflightInfo 所有永远都不会该 都是获得的总数据
    flightFilterData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      depAirportPlace: '',
      depAirportTime: '',
      depAirportCompany: '',
      depPlaneSize: '',
      planeSize: [
        { name: '大', size: 'L' },
        { name: '中', size: 'M' },
        { name: '小', size: 'S' }
      ]
    }
  },
  methods: {
    changeCompany (val) {
      // filter 返回过滤后的结果
      const arr = this.flightFilterData.flights.filter(v => {
        return v.airline_name === val
      })
      this.$emit('setData', arr)
    },
    changeAirport (val) {
      const arr = this.flightFilterData.flights.filter(v => {
        return v.org_airport_name === val
      })
      this.$emit('setData', arr)
    },
    changeTime (val) {
      const arr = this.flightFilterData.flights.filter(v => {
        const start = +v.dep_time.split(':')[0]
        return val.from <= start && val.to > start
      })
      this.$emit('setData', arr)
    },
    changeSize (val) {
      console.log(val)
      const arr = this.flightFilterData.flights.filter(v => {
        return v.plane_size === val
      })
      this.$emit('setData', arr)
    },
    cancelAll () {
      this.$emit('setData', this.flightFilterData.flights)
      this.depAirportPlace = ''
      this.depAirportTime = ''
      this.depAirportCompany = ''
      this.depPlaneSize = ''
    }
  },
  watch: {
    flightFilterData (val) {

    }
  }

}
</script>

<style lang="less" scoped>
.filter{
  width: 700px;
  margin: 20px 0;
  /deep/.el-input__inner{
    font-size: 10px;
  }
}
</style>
